<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件自定义事件emit</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="App">

    <html-a v-bind:parent-msg="message" v-on:child-event="parentFn"></html-a>
    <div>===================</div>
    <html-b v-bind:parent-msg="message"></html-b>
</div>
<script>
    const htmlA = {//子组件
        data(){  //数据
            return {
                message:"子组件Ahello"
            }
        },
        props:['parentMsg'],//组件通信
        //自定义事件
        //emits:['child-event'],
        emits:{
            //'child-event':null
            'child-event':(value)=>{
                console.log(value);
            }
        },
        methods:{
            childClick(value){
                this.$emit('child-event',value)
            }
        },
        //模板
        template:`
    <div>{{message}}</div>
    <div>{{parentMsg}}</div>
    <button v-on:click="childClick(message)">{{message}}</button>
`
    };
    const htmlB = {//子组件
        data(){  //数据
            return {
                message:"子组件Bhello"
            }
        },
        props:['parentMsg'],//组件通信
        //模板
        template:`<div>{{message}}</div><div>{{parentMsg}}</div>`
    };
    const vm = Vue.createApp({  //根组件
        data(){
            return {
                message:"父组件hello"
            }
        },
        components:{
            'html-a':htmlA,
            'html-b':htmlB
        },
        methods:{
            parentFn(value){

                //该方法的执行：是html-a子组件执行了this.$emit('child-event',value)
                //同时html-a上绑定了指令v-on:child-event="parentFn"
                console.log("parentFn value",value)

                this.message=value
            }
        }
    });
    vm.mount("#App");


</script>
</body>
</html>